<template>
    <el-card>
        <div class="fs-16 bold">
            保司保单号
        </div>
        <div>
            <div class="reset-pd">
                <filterComponent hide-head v-model:filter-data="filterData" @doSearch="handleSearch" />
            </div>
            <tableComponent class="set-height mg-t-20" :table-header="tableHeader" :table-data="tableData"
                v-model:page-info="pageInfo" @pageChange="handlePageChange">
                <template #valid>
                    <el-table-column label="可用工种" prop="occupationList">
                        <template #default="scope">
                            <span v-for="(i, index) in scope.row.occupationList" :key="index">
                                {{ i.name }}（{{ i.level }}类）；
                            </span>
                        </template>
                    </el-table-column>
                </template>
                <template #settings>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="handleShowUpdate(scope.row)">修改</el-button>
                        </template>
                    </el-table-column>
                </template>
            </tableComponent>
        </div>
    </el-card>
    <updatePlan v-model:show="showUpdate" :cur-item="curItem" @success="getList"/>
    <batchSetPlan v-model:show="showDrawer" :code="props.code" :insureName="props.insureName"/>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getPolicyList } from 'api/insure/longTerm.ts'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import updatePlan from '../dialog/updatePlan.vue'
import batchSetPlan from '../drawer/batchSetPlan.vue'

const showUpdate = ref(false)
const showDrawer = ref(false)

const curItem = ref(null)

const props = defineProps({
    code: {
        type: [Number, String]
    },
    insureName: {
        type: String
    },
})

const filterData = ref({
    list: {
        name: {
            name: '生效年月',
            prop: 'yearMonth',
            value: null,
            placeholder: '请选择生效年月',
            type: 'date',
            dateType: 'month',
            valueFormat: 'YYYY-MM'
        },
    },
    buttonList: [
        {
            icon: 'Plus',
            name: '批量保单号',
            click: () => {
                showDrawer.value = true
            }
        }
    ]
})

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '保司编号',
        prop: 'insureCompanyType',
    },
    {
        label: '方案编码',
        prop: 'planCode',
    },
    {
        label: '方案名称',
        prop: 'planName',
    },
    {
        label: '保单号',
        prop: 'policyNo',
    },
    {
        label: '月份',
        prop: 'yearMonth',
        width: 100
    },
])

const showAdd = ref(false)

const tableData = ref([])

const createQuery = () => {
    const data = {}
    for (const key in filterData.value.list) {
        data[filterData.value.list[key].prop] = filterData.value.list[key].value
    }
    return data
}

const getList = () => {
    getPolicyList({
        insureCompanyType: props.code,
        ...createQuery(),
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize
    }).then(res => {
        tableData.value = res.rows
        pageInfo.value.total = res.total
    })
}

const handleSearch = () => {
    getList()
}

const handlePageChange = () => {
    getList()
}

const handleShowUpdate = (item) => {
    curItem.value = item
    showUpdate.value = true
}

watch(() => props.code,(newval) => {
    if (newval) {
        getList()
    }
})
</script>
<style lang="scss" scoped>
:deep(.reset-pd .el-card__body) {
    padding: 0 !important;
}
.set-height {
    height: calc(100vh - 305px);
}
</style>